<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="utf-8"/>
    <title>访客预约</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/login.css" media="all">
    <script>
        if (window != top)
            top.location.replace(location.href);
    </script>
    <style>
        .layui-input, .layui-textarea {
            display: block;
            width: 78%;
            padding-left: 10px;
        }
        .login-body .layui-form-pane .layui-form-label {
            width: 108px;
        }
    </style>
</head>

<body>
<div class="login-wrapper">

    <div class="login-header">
        <img src="${pageContext.request.contextPath}/assets/images/logo.png">访客管理系统
    </div>

    <div class=" login-body">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="layui-icon layui-icon-engine"></i>&nbsp;&nbsp;您的预约列表
            </div>

                <div class="layui-form layui-border-box layui-table-view" lay-filter="LAY-table-1" lay-id="1" style=" ">
                    <div class="layui-table-box">
                        <div class="layui-table-header">
                            <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
                                <thead>
                                <tr>
                                    <th data-field="username" data-key="1-0-0" class="">
                                        <div class="layui-table-cell laytable-cell-1-0-0"><span>预约时间</span></div>
                                    </th>
                                    <th data-field="joinTime" data-key="1-0-1" class="">
                                        <div class="layui-table-cell laytable-cell-1-0-1"><span>预约对象</span></div>
                                    </th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="layui-table-body layui-table-main">
                            <c:if test="${empty list}">
                                暂无预约数据
                            </c:if>
                            <c:if test="${not empty list}">
                                <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
                                    <tbody>
                                    <c:forEach items="${list}" var="v">
                                        <tr data-index="0" class="">
                                            <td data-field="username" data-key="1-0-0" class="">
                                                <div class="layui-table-cell laytable-cell-1-0-0">${v.appointmentTime}点</div>
                                            </td>
                                            <td data-field="joinTime" data-key="1-0-1" class="">
                                                <div class="layui-table-cell laytable-cell-1-0-1">${v.userName}</div>
                                            </td>
                                        </tr>
                                    </c:forEach>

                                    </tbody>
                                </table>
                            </c:if>

                        </div>
                    </div>
                    <style>.laytable-cell-1-0-0 {
                        width: 200px;
                    }

                    .laytable-cell-1-0-1 {
                        width: 150px;
                    }

                    .laytable-cell-1-0-2 {
                    }</style>
                </div>
                <div class="layui-form-item">
                    <button   class="layui-btn layui-btn-fluid" onclick="logout()">退 出</button>
                </div>
        </div>
    </div>

    <div class="login-footer">
        <p>© 2020 访客管理系统</p>
    </div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/assets/libs/layui/layui.js"></script>
<script>
    layui.config({
        base: 'module/'
    }).use(['form','laydate'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#appointmentTime'
            ,type: 'datetime'
            ,format: 'yyyy-MM-dd HH点'
        });
    }); // 表单提交
    function logout(){
        console.log(1111);
        window.location.href="${pageContext.request.contextPath}/visitorManager/subscribe";
    }
</script>
</body>
</html>